
import { IRouteComponentProps, useDispatch, useSelector, } from "umi";
import { Form, Input, Button, Select, Table, Popconfirm, message, Modal, Row } from 'antd';
import { useEffect, useState } from "react";
import styles from "./Mypages.less";
import "./Mypages.less"
import moment from "moment";
const { Option } = Select;
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
// 抛出文件
const Mypages: React.FC = () => {
    const [form] = Form.useForm();
    let [flag, setFlag] = useState(false);
    // 连接dva仓库
    const state = useSelector((state: { mypages: any }) => state.mypages);
    // 搜索提交
    const onFinish = (values: any) => {
        console.log(values);
    };
    // 重置提交
    const onReset = () => {
        form.resetFields();
    };
    // 请求表格数据
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch({
            type: "mypages/query",
        })
    }, [])
    //表格
    const columns = [
        {
            title: '名称',
            dataIndex: "name",
            align: "center",
            render: (row: string) => { return (<div><span>{row}</span></div>) }
        },
        {
            title: '路径',
            dataIndex: 'path',
            align: "center",
            key: '2',
            render: (row: string) => { return (<div><span>{row}</span></div>) }
        },
        {
            title: '顺序',
            dataIndex: 'order',
            align: "center",
            key: '3',
            render: (row: string) => {
                return (<div>{row}</div>)
            }
        },
        {
            title: '阅读量',
            dataIndex: 'views',
            align: "center",
            key: '4',
            render: (row: string) => {
                return (<div style={{ textAlign: "center", }}>
                    <span style={{ padding: "2px 3px", textAlign: "center", borderRadius: "10px", backgroundColor: "#52C41A", color: "white" }}>{row}</span></div>)
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            align: "center",
            key: '5',
            render: (row: string) => {
                if (row === "publish") {
                    return <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                        <span style={{ display: "inline-block", background: "#5BC726", width: "5px", height: "5px", borderRadius: "50%", margin: "0px 5px", verticalAlign: "center" }}></span>
                        <span>已发布</span>
                    </div>
                } else {
                    return <div>
                        <span style={{ display: "inline-block", background: "#FAAD14", width: "5px", height: "5px", borderRadius: "50%", margin: "0px 5px", verticalAlign: "center" }}></span>
                        <span>草稿</span>
                    </div>
                }
            }
        },
        {
            title: '发布时间',
            dataIndex: 'publishAt',
            key: '6',
            align: "center",
            render:(row:string)=>{ 
                return  <div>
                     {moment(row).format("YYYY-MM-DD HH:mm:ss")}
                </div>
             }
        },
        { title: '操作', 
        key: '7',  
        align: "center",
        render:()=>{
            return <div style={{color:"#29A2FF"}}>
                <span  onClick={()=>{
                    console.log("编辑")
                }} style={{padding:"10px 10px 10px 10px"}}>编辑</span>
                <span onClick={()=>{
                    console.log("下线")
                }}  style={{padding:"10px 10px 10px 10px"}}>下线</span>
                <span onClick={()=>{
                    console.log("查看")
                }} style={{padding:"10px 10px 10px 10px"}}>查看</span>
                <span onClick={()=>{
                    console.log("访问")
                }} style={{padding:"10px 10px 10px 10px"}}>访问</span>
            </div>
        }
     },
    ];


    // 全选,反选
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            setFlag(!flag);
        },
        getCheckboxProps: (record: any) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    console.log(state.pageList)
    return <div className={styles.pages}>
        <div className={styles.pages_header}>
            这是页面管理页面
        </div>
        <div className={styles.pages_count}>
            <div className={styles.cont}>
                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                    <Row style={{ width: "100%", height: "30%", display: "flex" }}>
                        <Form.Item name="name" label="文件名称" style={{ width: '30%', marginTop: "10px" }}>
                            <Input placeholder="请输入文件名称" />
                        </Form.Item>
                        <Form.Item name="url" label="路径" style={{ width: '30%', marginTop: "10px" }}>
                            <Input placeholder="请输入路径名称" />
                        </Form.Item>
                        <Form.Item name="select" label="状态" style={{ width: '30%', marginTop: "10px" }}>
                            <Select placeholder="请选择" >
                                <Option value="">已通过</Option>
                                <Option value="other">未通过</Option>
                            </Select>
                        </Form.Item></Row>
                    <Form.Item {...tailLayout}  >
                        <Button type="primary" style={{margin:"3% 4% 0% 55%"}} htmlType="submit">
                            搜索
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <div className={styles.count2}>
                <Table  rowSelection={{ ...rowSelection }} rowKey={record => record.id} dataSource={state.pageList} columns={columns && columns as any} />
            </div>
        </div>
    </div>
}

export default Mypages